<template>
    <div>
        <div class="header">
            <h3 class="title-txt">
                {{newinf.title}}
            </h3>
            <p>
                <span >发表时间:{{newinf.formatDateTime | formatDate}}</span>
                <span>点击{{newinf.num}}次</span>
            </p>
        </div>

        <div class="content" v-html="newinf.content">
            {{newinf.content}}
        </div>

        <!--获取父组件的Id，在子组件中需要使用文章详情页的Id来查询当前详情页的所有评论-->
        <comment-box :articleId="id"></comment-box>
    </div>
</template>

<script>

    // 导入评论子组件，在需要的组件中导入
    import comment from "../subcomponents/comment.vue"

    export default {
        name: "NewInfo",
        created() {
          this.getNewINfo();
        },
        data() {
            return {
                id: this.$route.params.id, // 将路由传过来的参数挂载到data上，方便以后使用
                newinf: {}
            }
        },
        methods: {
            getNewINfo() {
                this.$http.get("newInfo.main?id="+ this.id +"").then(function (result) {
                    if (result.status === 200) {
                        this.newinf = result.body;
                    }
                })
            }
        },
        components: {
            // 注册评论子组件
            "commentBox": comment
        }
    }
</script>

<style lang="scss">
    .header {
        padding: 10px 10px;
        .title-txt {
            padding: 0 10px;
            font-size: 15px;
            /*text-align: center;*/
            color: #cf2d28;
            font-weight: bold;
            line-height: 20px;
        }
        p {
            padding: 10px 0;
            border-bottom: 2px solid #d8d8d8;
            color: #4a82d1;
            display: flex;
            justify-content: space-between;
        }
    }

    .content {
        padding: 0 10px;
        color: #666666;
        font-size: 14px;
        img {
            width: 100%;
        }
    }
</style>